@import 'common';

%headline {
    width: 94.4vw;
    height: 7.3333vw;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    .left {
        img {
            width: 7.4667vw;
            height: 7.2vw;
            vertical-align: middle;
        }

        span {
            font-size: 4vw;
        }
    }

    .right {
        display: flex;
        align-items: center;

        img {
            width: 3.3333vw;
            height: 3.4667vw;
            vertical-align: middle;
        }

        span {
            font-size: 3.2vw;
        }
    }
}

%classify {
    width: 100%;
    //height: 38.8vw;
    margin-top: 4.4vw;

    .headline {
        @extend %headline;

        .left img {

            width: 5.4667vw;
            height: 5.3333vw;
        }
    }

    ul {
        display: flex;
        justify-content: space-around;
        margin-top: 6.4vw;

        li {

            img {
                width: 17.7333vw;
                height: 17.7333vw;
                background-color: black;
            }
        }
    }
}



.web {
    header {
        .select {
            width: 21.2vw;
            height: 7.4667vw;
            border: solid .2667vw #ff9344;
            appearance: none;
            background: url(../img/index/pull-down.png);
            background-repeat: no-repeat;
            background-position: 15vw 2vw;
            background-size: 4.2667vw 2.1333vw;
            padding-left: 2vw;
            box-sizing: border-box;
            position: relative;
        }
    }



    //内容
    main {


        // 分类的图片
        .classifyimg {

            width: 95%;
            margin: 0 auto;



            .top {
                display: flex;
                justify-content: space-between;

                .img {
                    text-align: center;

                    img {
                        width: 19.7333vw;
                        height: 19.8667vw;

                    }
                }
            }

            // 小圆点
            ul {
                margin-top: 1.3333vw;
                display: flex;
                justify-content: center;

                li {
                    margin: 0 1.3333vw;
                    width: 2.5333vw;
                    height: 2.4vw;
                    border-radius: 100%;
                    background-color: #ff9344;
                    opacity: 0.5;

                    &:first-child {
                        opacity: 1;
                    }
                }
            }

        }

        //美食类
        .gourmet {
            @extend %classify;

            .headline .left img {
                width: 7.2vw;
                height: 5.6vw;
            }
        }

        //运动类
        .sports {
            @extend %classify;

            .headline .left img {
                width: 6.2667vw;
                height: 7.7333vw;
            }
        }

        //电影类
        .film {
            @extend %classify;

            .headline .left img {
                width: 7.0667vw;
                height: 6.9333vw;
            }

            ul {
                li {
                    &:nth-child(3) {
                        width: 17.7333vw;
                        height: 17.7333vw;
                        background-color: black;
                    }
                    &:last-child {
                        width: 17.7333vw;
                        height: 17.7333vw;
                        background-color: black;
                    }
                }
            }
        }




    }


}